<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3033722_ohr77f7gy3h.css">
</head>
<body>
    <div id="app">
        <!-- 父组件使用子组件时,可以在组件的标签对内 传入一些 text html 组件 => 这些内容被子组件接收之后 会替换子组件原本的插槽标签 -->
        <!--
             编译作用域 虽然标签对中的内容最终会放到子组件中,但是它是属于父组件给子组件传入的
            注意: 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
        -->

        <my-button>
            我的按钮
        </my-button>
        <my-button>
            <i class="iconfont icon-pengyou"></i>按钮
        </my-button>
        <my-button>
            按钮{{count}}
        </my-button>

        
        <my-button>

        </my-button>
    </div>
</body>

<template id="myButton">
    <div class="my-button">
        <button>
            <!-- 在组件内使用<slot></slot>标签作为占位符,  -->
            <!-- slot标签对中的内容 会作为后备内容(默认值) => 组件被调用时传入的内容,就使用传入的 否则就使用默认的 -->
            <slot>默认按钮</slot>
        </button>
    </div>
</template>

<script>

    // 问题1. 组件内的按钮内容是死的 => 活的  => 传入一个属性来定义按钮内容
    // 问题2. 父组件传入的内容 可能是 text , html结构, 其他组件  => 通过属性接收 后期不好解析


    // 官方提供了插槽功能 => 在组件内使用<slot></slot>标签作为占位符, 


    Vue.component("my-button",{
        props:["text"],
        data(){
            return {}
        },
        template:"#myButton",
    })


    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        }
    })



</script>
</html>